<!--  -->
<template>
  <div class="icons">
    <swiper>
      <swiper-slide v-for="(page,index) of pages"
      :key="index"> <!--循环有多少个轮播页面 -->
      <div class="icon"
      v-for="item of page"
       :key="item.id">
        <div class="icon-img">
          <img class="icon-img-content" :src="item.imgUrl"/>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    list: Array
  },
  components: {},

  computed: {
    pages () { /* 在计算属性中定义一个pages数据 */
      const pages = [] /* 定义一pages数组 */
      this.list.forEach((item, index) => { /* 对iconList的每项数据做个循环，循环会接受
      到连个参数，一个是循环项，一个是循环项对应的下标项 */
        const page = Math.floor(index / 8) /* 计算页码，当前页下标项除以8，向下取整数 */
        if (!(pages[page])) { /* 如果pages下的[page]不存在，那么pages[page]为空 */
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  },

  methods: {}
}

</script>
<style lang='stylus' scoped>
 @import '~styles/varibles.styl'  /* 修改webpack别名后，简化写法 */
 @import '~styles/mixins.styl'  /* icon-desc文字比较多的时候用省略号表示 */
  .icons >>> .swiper-slide /* icons下的swiper-slide组件，执行icons的样式，
    因为swiper-slide宽高已经限制了右图片大小决定，所以只能在这个宽高之内滑动
    要想在icons的宽高下滑动，就需要这样的写法 */
    width: 100%
    overflow :hidden
    height :0
    padding-bottom : 50.5% /* width的宽度是100%，那么他往下撑的高度是50%。50%意思就是高宽比值 */
  .icons
    margin-top : .2rem
    .icon
      position: relative
      overflow: hidden
      float: left
      width: 25%
      height: 0
      padding-bottom: 25% /* 意思是宽高都是25% */
      .icon-img
        position :absolute /* 它的绝对定位是相对于页面，位置会变顶部，所以给他的父级一个relative即可解决 */
        left: 0
        top: 0
        right: 0
        bottom: .44rem
        box-sizing:border-box /* 图片中间显示 */
        padding: .1rem /* 图片中间显示 */
        .icon-img-content
          height:100%
          display: block /* 图片中间显示 */
          margin: 0 auto /* 图片中间显示 */
      .icon-desc
        text-align: center
        color: $darkTextcolor
        ellipsis() /* icon-desc文字比较多的时候用省略号表示 */
</style>
